<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<link rel="stylesheet" href="/plugins/bootstrap-fileinput/css/fileinput.css" />
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select id="one"  onchange="getTwo(this.value)" class="form-control" >
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select id="two" onchange="getThree(this.value)" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select id="three" onchange="getfire(this.value)"class="form-control select-sm" ></select>
		                              			</td>
		                              			<td id="moban">
		                           	  				模板ID:19
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"    placeholder="商品名称" id="sellerId1">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control"  id="pinpai">

									  </select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="fu"  placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" id="jia" placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" style="width:800px;height:400px;visibility:hidden;" id="editor" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" id="bao"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control"  id="shou"  placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="images">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">
									<table id="custom" style="width:100%;">

									</table>

								</div>
                            </div>

                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="specBody">


	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody id="tbb">
						                      <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="add()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped" >
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" id="imageText">  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<input type="text" name="itemImages" id="itemImages" >
						<input type="file" id="myFile" name="myFile" multiple>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" >保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
<script>

	$(function (){
		getOne()
		imageAdd();
	})

	//图片上传
	function imageAdd(){
		//设置图片上传
		$('#myFile').fileinput({
			language: 'zh',
			uploadUrl: "http://127.0.0.1:9099/file/upload",
			showPreview: true,   //默认true，设置为false时默认不显示整个文件区，自然就无法拖曳文件进行上传了。
			browseClass: 'btn btn-primary',//按钮样式
			allowedFileExtensions: ["txt", "gif", "png", "jpg","mp4"], //该文件上传的后缀名
			maxFileSize: 20480000,//文件上传的大小
			maxFileCount: 3,//文件上传的最大数量
			encoding: "multipart/form-data",
			initialPreviewAsData: true,//是否初始预览图片
			initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
			//initialPreview:"<%=request.getContextPath()%>/file/download?filename=${tmove.movieImage}"//图片回显(初始预览图片地址)
		});
		$("#myFile").on("fileuploaded",function (event,data,previewId,index) {
			var  result = data.response;
			if (result.code == 1){
				var url = result.data;
				$("#itemImages").val(result.data)
				var imageText=$("#imageText").val();
				img = '';
				img+="<tr>";
				img+='<td>';
				img+='<span id="imaget">'+imageText+'</span>';
				img+='</td>';
				img+='<td>';
				img+='<img alt="" src="'+url+'" width="100px" height="100px">';
				img+='</td>';
				img+='<td>';
				img+='<button onclick="deleteTr(this)" type="button" className="btn btn-default" title="删除"><i className="fa fa-trash-o"></i> 删除';
				img+='</button>';
				img+='</td>';
				img+='</tr>';
				$("#images").append(img);
			}else {
				alert(result.message)
			}
		})
	}

	// 图片删除当前行
	function deleteTr(is){
		$(is).parent().parent().remove();
	}

	//一级联动
	function getOne() {
		var html = getselect(0);
		$("#one").html(html);
		var moban = getMoban(0);
		$("#moban").html(moban);
		getImt(0)
	}
	//二级联动
	function getTwo(id) {
		var html = getselect(id);
        $("#two").html(html);
		$("#three").html('<option value="-1">---请选择---</option>');
		var moban = getMoban(id);
		$("#moban").html(moban);
		getImt(id);
		// getType(id);
	}
	//三级联动
	function getThree(id) {
		var html = getselect(id);
        $("#three").html(html);
		var moban = getMoban(id);
		$("#moban").html(moban);
		getImt(id);
		getType(id);
	}
	//四级联动
	function getfire(id){
		var moban = getMoban(id);
		$("#moban").html(moban);
		getImt(id);
		getType(id);
	}

	//根据分类的三级联动id查询模板数据
	function getType(id){
		$.ajax({
			url : "/goods/getType",
			type : "post",
			data : {itemCatId:id},
			dataTable : "json",
			async: false,
			success : function(data){
				if (data.code == 1){
					var template =data.data;
					var clist = JSON.parse(template.customAttributeItems);
					//拼接扩展属性
					var html = '';
					$(clist).each(function(i,e) {
						html += '<div>' +
								'<div class="col-md-2 title" id="text'+i+'">'+e.text+'</div>' +
								'<div class="col-md-10 data">' +
								'<input name="kuozhan" class="form-control" placeholder="扩展属性">' +
								'</div>' +
								'</div>'
						})
					$("#custom").html(html)

					//取出规格和选项
					var specList = template.specVO2s;
					//var spec =JSON.parse(specList);
					var a = '';
					// $(specList).each(function(i,e) {
					// 	a +=    '<div class="col-md-2 title" id="gug" name="gug">'+e.text+'</div>'
					// 	a +=	'<div class="col-md-10 data">'
					// 	$(e.optionList).each(function(i,e) {
					// 		a +=	'<span>'
					// 		a +=	'<input  type="checkbox" value="'+e.id+'">'+e.optionName
					// 		a +=	'</span>  '
					// 	})
					// 	a +=	'</div>'
					// })
					// $("#guige").html(a)
					$(specList).each(function (ii,e) {
						a+='<div >'
						a+='<div name="attributeName" class="col-md-2 title">'+e.text+'</div>'
						a+='<div class="col-md-10 data">'
						$(e.optionList).each(function (i,g) {
							var ind = ii+""+i;
							a+='<span id="optionName'+ind+'">'
							a+='<input name="box'+ii+'" value="'+g.id+'" type="checkbox" >'+g.optionName+''
							a+='</span>'
						})
						a+='</div>'
						a+='</div>'
					})
					$("#specBody").html(a);
				}
			},
			error :function (data){

			}
		})
	}

	//模板ID
	function getMoban(id){
		var aa = '';
		$.ajax({
			url : "/goods/getCat",
			type : "post",
			data : {parentId:id},
			dataTable : "json",
			async: false,
			success : function(data){
				if (data.code == 1){
					var a= data.data;
					if (a == null){
						aa += '模板ID:0'
					}else{
						aa += '模板ID:'+a.typeId+''
					}

				}
			},
			error :function (data){

			}
		})
		return aa;
	}

	//三级联动
	function getselect(id){
		var html = '<option value="-1">---请选择---</option>';
		$.ajax({
			url : "/goods/getOne",
			type : "post",
			data : {parentId:id},
			dataTable : "json",
			async: false,
			success : function(data){
				if (data.code == 1){
					var catList = data.data;
					$(catList).each(function(i,e){
						html += '<option value="'+e.id+'">'+e.name+'</option>'
					})
				}
			},
			error :function (data){

			}
		})
		return html;
	}

	//品牌
	function getImt(id){
		$.ajax({
			url : "/goods/getImt",
			type : "post",
			data : {id:id},
			dataTable : "json",
			async: false,
			success : function(data){
				if (data.code == 1){
					var a =  data.data;
					if (a == null){

					}else{
						var b = a.brandIds;
						var c =JSON.parse(b);
						var html = '';
						$(c).each(function(i,e){
							html += '<option value="'+e.id+'">'+e.text+'</option>'
						})
						$("#pinpai").html(html);
					}
				}
			},
			error :function (data){

			}
		})
	}

	//文本框
	var editor;
	KindEditor.ready(function (K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager: true,

			afterBlur: function(){this.sync();}

		});

	});

	//增加
	function add(){
		//三级联动
		var one = $("#one").val();
		var two = $("#two").val();
		var three = $("#three").val();
		//商品名称
		var goodsName = $("#sellerId1").val();
		//品牌
		var brandId = $("#pinpai").val();
		//副标题
		var caption = $("#fu").val();
		//价格
		var price = $("#jia").val();
		//介绍
		var introduction = $("#editor").val();
		//列表
		var packageList = $("#bao").val();
		//售后
		var saleService = $("#shou").val();
		//----------------------------------------------------------------
		//商品图片
		var arr = [];
		var trs = $("#images").find('tr');
		$(trs).each(function(i,e){
			var tds = $(e).find('td');
			var color = $(tds[0]).find('span').html()
			var src = $(tds[1]).find("img").attr("src")
			var image ={color:color,src:src}
			arr.push(image)
		})
		//图片的路径
		var imag = $("#itemImages").val();
		//图片颜色加路径的JSON串
		var itemImages = JSON.stringify(arr)
		//----------------------------------------------------------------
		//扩展属性
		var customInputs = document.getElementsByName("kuozhan")
		var arr1 = []
		$(customInputs).each(function (i,e) {
			var text = $("#text"+i+"").html()
			var customAttributeItem = {text:text,value:e.value}
			arr1.push(customAttributeItem)
		})
		var customAttributeItems = JSON.stringify(arr1)
		//----------------------------------------------------------------


		//获取规格被选中的复选框

		//规格属性
		var attributeNames = document.getElementsByName("attributeName")
		var arr2 = []
		$(attributeNames).each(function (ii,e) {
			var boxs = document.getElementsByName("box"+ii+"")
			var arr = []
			$(boxs).each(function (i,e) {
				var ind = ii+""+i;
				if (e.checked){
					var optionName = $("#optionName"+ind+"").text()
					arr.push(optionName)
				}
			})
			var attributeName = $(e).html()
			var specOption={attributeName:attributeName,attributeValue:arr}
			arr2.push(specOption)
		})
		var specificationItems = JSON.stringify(arr2);
		// console.log("规格属性"+specificationItems)

		//----------------------------------------------------------------
		//拼接item表的字段

        var title = []
        var brandList = JSON.parse(specificationItems)
        $(brandList).each(function(i,e){
            title.push(e.attributeValue)
        })
        var value = title[0]
        var value1 = title[1]
        var value2 = []
        for (var i = 0; i < value.length; i++) {
            var ao = value[i]
			for (var y = 0; y < value1.length; y++) {
				var  assd = ao+" "+value1[y]
				var ai = {title :assd}
				value2.push(ai)
			}
        }
		var tit = JSON.stringify(value2);
        console.log(tit)



		//往商品sku表(item)里增加价格和库存,共四条
		//查询table里所有的tr
		var trList = $("#tbb").find('tr');
		var itemList = [];//商品sku表需要的价格和库存
		//从第二行开始循环(i=1)
		for (var i = 0; i < trList.length; i++) {
			//查询循环到的这一行tr里的所有的td
			var tdList = $(trList[i]).find('td');
			//td的第三列里input框里面的值
			var price = $(tdList[2]).find('input').val();
			//td的第四列里input框里面的值
			var num = $(tdList[3]).find('input').val();
			//转成一个js对象
			var item = {seller:goodsName,price: price, num: num,image:imag};
			//将对象放进集合中
			itemList.push(item);
		}
		var items = JSON.stringify(itemList);
		console.log("suk表"+items);
		//----------------------------------------------------------------





		$.ajax({
			 url : "/goods/add",
			type : "post",
			data : {title:tit,items:items,goodsName:goodsName,category1Id:one,category2Id:two,category3Id:three,brandId:brandId,caption:caption,price:price,introduction:introduction,packageList:packageList,saleService:saleService,itemImages:itemImages,customAttributeItems:customAttributeItems},
			dataTable : "json",
			async: false,
			success : function(data){
				if (data.code == 1){
					alert(data.message);
				}
			},
			error :function (data){

			}
		})
	}

</script>

       
</body>

</html>